<template>
  <div class="content">
    <menu-path></menu-path>
    <!-- 商品分类 -->
    <div class="padd">
      <van-row>
        <van-col span="6" class="leftpage">
          <!-- 左侧边栏展示 -->
          <van-sidebar v-model="activeKey">
            <van-sidebar-item
              :title="item.cat_name"
              v-for="(item,i) in classList"
              :key="i"
              @click="classClick(item.children)"
              ref="sidebar-item"
            />
          </van-sidebar>
        </van-col>
        <van-col span="18" class="pageBox">
          <van-row v-for="(item,i) in classListChildren" :key="i">
            <!-- 右边数据展示 -->
            <h3 class="catname">/{{item.cat_name}}/</h3>
            <van-row>
              <van-grid :column-num="3" :border="false">
                <van-grid-item
                  v-for="(list,i) in item.children"
                  :key="i"
                  :icon="list.cat_icon"
                  :text="list.cat_name"
                  @click="jumpGood(list.cat_id)"
                ></van-grid-item>
              </van-grid>
            </van-row>
          </van-row>
        </van-col>
      </van-row>
    </div>
    <!-- 应用导航区引入子组件 -->
    <menu-nav></menu-nav>
  </div>
</template>
<script>
import Navgation from '../util/navigation.vue'
import Header from '../util/header.vue'
export default {
  data() {
    return {
      activeKey: 0,
      //分类数据
      classList: [],
      //分类子项数据
      classListChildren: [],
    }
  },
  created() {
    this.getClassData()
  },
  mounted() {
    const leftpage = document.getElementsByClassName('leftpage')[0]
    leftpage.style.height = (document.documentElement.clientHeight - 96) + 'px'
    const pageBox = document.getElementsByClassName('pageBox')[0]
    pageBox.style.height = (document.documentElement.clientHeight - 96) + 'px'

  },
  components: {
    'menu-nav': Navgation,
    'menu-path': Header
  },
  methods: {
    //获取分类数据
    async getClassData() {
      const data = await this.$axios.get('/categories')
      if (data.meta.status !== 200) {
        this.$toast.fail('数据请求失败')
      }
      this.classList = data.message
      this.classListChildren = data.message[0].children
    },
    //点击侧边栏项获取子项数据
    classClick(children) {
      this.classListChildren = children
      document.getElementsByClassName('van-col--18')[0].scrollTop = 0
    },
    jumpGood(id) {
      this.$router.push({ name: '/gooddate', params: { id: id } })
    },
   
  }
}
</script>

<style lang="less" scoped>
.iconlist {
  vertical-align: middle;
}
.catname {
  text-align: center;
}
.van-col--8 {
  width: 25%;
}
.van-col--6 {
  height:520px;
  overflow-y: auto;
}
.van-col--18 {
  height: 520px;
  overflow-y: auto;
}
.padd {
  margin-top: 45px;
}
</style>